<template>
  <div>
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>水电费管理</el-breadcrumb-item>
      <el-breadcrumb-item>水电费缴纳</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
      <div>
        <!--    功能区-->
        <div style="margin: 10px 0">
          <!--    搜索区-->
          <div style="margin: 10px 0">
            <el-date-picker
              v-model="date"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <el-button
              icon="Search"
              style="margin-left: 5px"
              type="primary"
              @click="load"
            ></el-button>
            <el-button
              icon="refresh-left"
              style="margin-left: 10px"
              type="default"
              @click="reset"
            ></el-button>
          </div>
        </div>
        <!--    表格-->
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          max-height="705"
          style="width: 100%"
        >
          <el-table-column label="#" type="index" />
          <el-table-column label="房间号" prop="dormId" />
          <el-table-column label="缴费人员" prop="operatorName" />

          <el-table-column label="水费金额" prop="waterFee" />
          <el-table-column label="电费金额" prop="electricityFee" />
          <el-table-column label="总计" prop="totalAmount" />

          <el-table-column label="截至日期" prop="dueDate" />
          <el-table-column label="缴费状态" prop="status" sortable />
          <el-table-column label="发布日期" prop="createdAt" sortable />
          <!--      操作栏-->
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                v-if="scope.row.status !== '已缴费'"
                icon="Edit"
                type="primary"
                @click="handleEdit(scope.row)"
                >缴费</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div style="margin: 10px 0">
          <el-pagination
            v-model:currentPage="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
        <!--      弹窗-->
        <div>
          <el-dialog
            v-model="dialogVisible"
            :title="水电费发布"
            width="30%"
            @close="cancel"
          >
            <el-form ref="form" :model="form" label-width="120px">
              <!-- 宿舍号 -->
              <el-form-item label="宿舍号" prop="dormId">
                <el-input
                  v-model="form.dormId"
                  :disabled="disabled"
                  clearable
                  style="width: 80%"
                ></el-input>
              </el-form-item>
              <!-- 操作人 -->
              <el-form-item label="操作人" v-if="judge" prop="operatorName">
                <el-input
                  v-model="this.role.name"
                  clearable
                  style="width: 80%"
                ></el-input>
              </el-form-item>
              <!-- 水费金额 -->
              <el-form-item label="水费金额" prop="waterFee">
                <el-input-number
                  v-model="form.waterFee"
                  style="width: 80%"
                  :precision="2"
                  :step="0.1"
                  :min="0"
                ></el-input-number>
              </el-form-item>
              <!-- 电费金额 -->
              <el-form-item label="电费金额" prop="electricityFee">
                <el-input-number
                  v-model="form.electricityFee"
                  style="width: 80%"
                  :precision="2"
                  :step="0.1"
                  :min="0"
                ></el-input-number>
              </el-form-item>
              <!-- 总计 -->
              <el-form-item label="总计" prop="totalAmount">
                <el-input
                  v-model="form.totalAmount"
                  disabled
                  clearable
                  style="width: 80%"
                ></el-input>
              </el-form-item>
              <!-- 截至日期 -->
              <el-form-item label="截至日期" prop="dueDate">
                <el-date-picker
                  v-model="form.dueDate"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="选择截至日期"
                  style="width: 80%"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="下拉选择缴费" v-if="judge" prop="status">
                <el-select
                  v-model="form.status"
                  placeholder="请输入申请状态"
                  style="width: 50%"
                >
                  <el-option label="未缴费" value="未缴费" />
                  <el-option label="缴费" value="已缴费" />
                </el-select>
              </el-form-item>
            </el-form>

            <template #footer>
              <span class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script >
import request from "@/utils/request";

const { ElMessage } = require("element-plus");

export default {
  name: "WaterInfo",
  components: {},
  data() {
    return {
      loading: true,
      disabled: false,
      judge: false,
      dialogVisible: false,
      search: "",
      date: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      detail: {},
      form: {},
      role: "",
      title: "",
    };
  },
  created() {
    this.role = JSON.parse(window.sessionStorage.getItem("user"));
    this.load();
    this.loading = true;
    setTimeout(() => {
      //设置延迟执行
      this.loading = false;
    }, 1000);
  },
  methods: {
    async load() {
      const currentUser = JSON.parse(sessionStorage.getItem("user")); // 获取当前登录用户信息
      console.log(currentUser);
      const username = currentUser.username; // 假设用户信息中包含 username
      request
        .get("/pay/findstu/" + username, {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: this.search,
            date1: this.date[0] == null ? "" : this.date[0].toISOString(),
            date2: this.date[1] == null ? "" : this.date[1].toISOString(),
            username: username,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.loading = false;
        });
    },
    reset() {
      this.search = "";
      this.date = [];
      this.load();
    },
    showDetail(row) {
      this.detailDialog = true;
      this.$nextTick(() => {
        this.detail = row;
      });
    },
    closeDetailDialog() {
      this.detailDialog = false;
    },
    add() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        this.disabled = false;
        this.form = {};
        this.judge = false;
      });
    },
    save() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.judge === false) {
            //新增
            await request.post("/pay/add", this.form).then((res) => {
              console.log(res);
              if (res.code === "0") {
                ElMessage({
                  message: "新增成功",
                  type: "success",
                });
                this.search = "";
                this.load();
                this.dialogVisible = false;
              } else {
                ElMessage({
                  message: res.msg,
                  type: "error",
                });
              }
            });
          } else {
            //修改
            await request.put("/pay/update", this.form).then((res) => {
              console.log(res);
              if (res.code === "0") {
                ElMessage({
                  message: "修改成功",
                  type: "success",
                });
                this.search = "";
                this.load();
                this.dialogVisible = false;
              } else {
                ElMessage({
                  message: res.msg,
                  type: "error",
                });
              }
            });
          }
        }
      });
    },
    cancel() {
      this.$refs.form.resetFields();
      this.dialogVisible = false;
    },
    handleEdit(row) {
      //修改
      this.judge = true;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        // 生拷贝
        this.form = JSON.parse(JSON.stringify(row));
        this.form.operatorName = this.role.name;
        this.disabled = true;
      });
    },

    handleSizeChange(pageSize) {
      //改变每页个数
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      //改变页码
      this.currentPage = pageNum;
      this.load();
    },
  },
};
</script>